<template>
	<div>
		<!-- 轮播 -->
		<van-swipe :autoplay="4000">
			<van-swipe-item v-for="(item,i) in carouselItems" :key="i">
				<router-link :to="{name:'productDetail',params:{id:item.productId}}">
					<img :src="APIDomainName + item.img" width="100%" />
				</router-link>
			</van-swipe-item>
		</van-swipe>

		<!-- 快捷入口 -->
		<van-grid>
			<van-grid-item v-for="(item,i) in homeItems" :key="i" :icon="item.img" :text="item.title"
				:to="{name:item.routeName}" />
		</van-grid>

		<!-- 商品推荐 -->
		<homeProduct title="书籍推荐" icon="gift-o" :productList="recommendedItems"></homeProduct>

		<!-- 新品到达 -->
		<homeProduct title="新书到达" icon="vip-card-o" :productList="newArrialItems"></homeProduct>

		<!-- 销售排行 -->
		<homeProduct title="销售排行" icon="award-o" :productList="topSaleItems"></homeProduct>

	</div>
</template>

<script>
	//导入封装后的接口	
	import {
		getHomeDataAPI
	} from "@/api/home.js";

	import homeProduct from "./components/homeProduct.vue"
	export default {
		components: {
			homeProduct
		},
		data() {
			return {
				// 轮播数据
				carouselItems: [],
				// 快捷入口导航 ，前端写死
				homeItems: [{
						title: "新闻资讯",
						routeName: "working",
						img: '/images/menu1.png',
					},
					{
						title: "图片分享",
						routeName: "working",
						img: "/images/menu2.png",
					},
					{
						title: "商品购买",
						routeName: "product",
						img: "/images/menu3.png",
					},
					{
						title: "留言反馈",
						routeName: "working",
						img: "/images/menu4.png",
					},
					{
						title: "视频专区",
						routeName: "working",
						img: "/images/menu5.png",
					},
					{
						title: "联系我们",
						routeName: "working",
						img: "/images/menu6.png",
					},
				],

				//商品推荐
				recommendedItems: [],
				//新品到达
				newArrialItems: [],
				// 销售排行
				topSaleItems: [],
			};
		},
		created() {
			//调用接口，获取首页轮播项数据	
			getHomeDataAPI().then(result => {
				console.log(result)
				this.carouselItems = result.data.carouselItems;
				this.recommendedItems = result.data.recommendedItems;
				this.newArrialItems = result.data.newArrialItems;
				this.topSaleItems = result.data.topSaleItems;


			}).catch(() => {});
		},
	};
</script>

<style lang="less" scoped>
</style>